<template>
  <div class="input-container">
    <el-input v-model="query" :placeholder="placeholder" clearable @keyup.native.enter="search">
      <el-button slot="append" icon="el-icon-search" @click.native="search" />
    </el-input>
  </div>
</template>
<script>
export default {
  props: {
    placeholder: {
      type: String,
      default: '请输入内容'
    }
  },
  data() {
    return {
      query: ''
    }
  },
  methods: {
    search() {
      this.$emit('search', this.query)
    },
    clear() {
      this.query = ''
    }
  }
}
</script>
<style lang="scss" scoped>
.input-container {
  width: 340px;
  border-radius: 6px;
  overflow: hidden;
  font-family: Roboto;
  .el-input /deep/ .el-input__inner{
  }
  .el-input /deep/ .el-input-group__append{
    padding: 0 10px !important;
  }
  .el-button /deep/.el-icon-search {
      font-size: 25px !important;
      vertical-align: middle;
  }
}
</style>
